<template>
  <div>
    <el-button @click="showDialog">新增</el-button>
    <el-table :data="modelValue" style="width: 100%">
      <el-table-column prop="index" label="序号" width="180" type="index" align="center" />
      <el-table-column prop="length" label="长度(米)" align="center">
        <template #default="{row}">
          {{ row.length }} 千米
        </template>
      </el-table-column>
      <el-table-column prop="location" label="位置" align="center" show-overflow-tooltip />
      <el-table-column prop="problems" label="步行道存在的问题" align="center">
        <template #default="{row}">
          <div v-if="row.problems && row.problems.length > 0">
            <el-tag
                v-for="problem in row.problems"
                :key="problem"
                style="margin-right: 5px; margin-bottom: 5px">
              {{ getProblemLabel(problem) }}
            </el-tag>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="{row, $index}">
          <el-button size="small" @click="handleEdit($index)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑记录' : '新增记录'">
      <el-form :model="formData" label-width="160px">
        <el-form-item label="长度(千米)">
          <el-input-number
              v-model="formData.length"
              :min="0"
              :step="1"
              controls-position="right"
              style="width: 100%" />
        </el-form-item>
        <el-form-item label="地图选点">
          <el-input v-model="formData.location" placeholder="点击选择位置" @click="selectLocation" />
        </el-form-item>
        <el-form-item label="步行道存在的问题">
          <el-checkbox-group v-model="formData.problems">
            <el-checkbox
                v-for="problem in problemOptions"
                :key="problem.value"
                :label="problem.label" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, ref, watch } from "vue";
import { Form } from "ant-design-vue";

const formItemContext = Form.useInjectFormItemContext();
const emits = defineEmits(["update:modelValue", "change", "blur"]);
const props = defineProps({
  componentSchema: {
    default: () => ({}),
    type: Object,
  },
  modelValue: {
    default: () => ([]),
    type: Array,
  },
});

const problemOptions = [
  { label: '路面破损', value: 'road_damage' },
  { label: '宽度不足', value: 'insufficient_width' },
  { label: '雨后积水', value: 'water_accumulation' },
  { label: '夜间照明不足', value: 'insufficient_lighting' },
  { label: '铺装不防滑', value: 'non_slip' },
  { label: '不能联贯住宅和各类服务设施', value: 'disconnected' },
  { label: '不符合无障碍设计要求', value: 'non_accessible' }
];
const dialogVisible = ref(false);
const isEdit = ref(false);
const currentIndex = ref(-1);

const formData = ref({
  length: 0,
  location: '',
  problems: [] // 这里存储的是 value 值
});
const getProblemLabel = (value: string) => {
  const option = problemOptions.find(opt => opt.value === value);
  return option ? option.label : value;
};

const showDialog = () => {
  isEdit.value = false;
  formData.value = {
    length: 0,
    location: '',
    problems: []
  };
  dialogVisible.value = true;
};

const handleEdit = (index) => {
  isEdit.value = true;
  currentIndex.value = index;
  formData.value = { ...props.modelValue[index] };
  dialogVisible.value = true;
};

const handleDelete = (index) => {
  const newData = [...props.modelValue];
  newData.splice(index, 1);
  emits("update:modelValue", newData);
  formItemContext.onFieldChange();
};
const handleConfirm = () => {
  const newData = [...props.modelValue];

  if (isEdit.value) {
    newData[currentIndex.value] = formData.value;
  } else {
    newData.push(formData.value);
  }

  emits("update:modelValue", newData);
  formItemContext.onFieldChange();
  dialogVisible.value = false;
};
// 保留原有的 watch 逻辑
const value = ref("");
watch(value, (e) => {
  emits("update:modelValue", e);
  formItemContext.onFieldChange();
});

watch(
    () => props.modelValue,
    (e) => {
      if (e && e.length > 0) {
        value.value = e;
      }
    },
    { immediate: true }
);
</script>

<style scoped>
.el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
